$message-height: 2rem;
$message-success-color: #339900;
$message-success-bg-color: #ddeeaa;
$message-error-color: #dd0000;
$message-error-bg-color: #ddbbbb;

.ui-messages {
  display: none;
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 999;
  min-height: $message-height;
  border: 1px solid currentColor;
  padding: calc(1rem / 2) 3rem;
  cursor: pointer;
  margin: 0 10%;
  text-align: center;

  @include media-breakpoint-up(lg) {
    margin: 0 30%;
  }

  &:after {
    position: absolute;
    top: 0;
    right: 10px;
    line-height: $message-height;
    font-size: 0.8rem;
    content: '\2715';
    color: currentColor;
  }

  &--success {
    display: block;
    background-color: $message-success-bg-color;

    a {
      text-decoration: underline;
    }
  }

  &--error {
    display: block;
    background-color: $message-error-bg-color;
  }
}
